<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['research:qualityControl:query']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handlePick"
        >挑选样本
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['research:qualityControl:edit']"
          :disabled="multiple"
          icon="el-icon-remove-outline"
          plain
          size="mini"
          type="success"
          @click="handleRemove"
        >批量移除
        </el-button>
      </el-col>
      <right-toolbar showSearch.sync="false" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="sampleList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="样本复份编号" prop="sampBackupCode"/>
      <el-table-column align="center" label="样本类型" prop="sampTypeName"/>
      <el-table-column align="center" label="样本源名称" prop="sampSourceName"/>
      <el-table-column align="center" label="采样时间" prop="samplingTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.samplingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="样本源类型" prop="sampSourceTypeName"/>
      <el-table-column :formatter="sampStateFormat" align="center" label="样本状态" prop="sampState"/>
      <el-table-column align="center" label="条码/二维码" prop="qrCode"/>
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['research:qualityControl:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleEditEntry(scope.row)"
          >编辑质控项
          </el-button>
          <el-button
            v-hasPermi="['research:qualityControl:edit']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleRemove(scope.row)"
          >移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!-- 挑选样本对话框 -->
    <sample-pick :open="open" :value="sampleList" samp-state="1,4,5" @onClose="samplePickClose"
                 @onConfirm="samplePickEvent"
    ></sample-pick>

    <el-dialog :visible.sync="entryOpen" append-to-body title="填写质控项" width="500px">
      <el-form ref="form" label-width="120px">
        <el-form-item v-for="(item, index) in qualityEntries" :key="index" :label="item.qcEntryName">
          <el-input v-if="item.qcEntryType === '0'" v-model="item.qcEntryReal"
                    onafterpaste="if(isNaN(value))execCommand('undo')" onkeyup="if(isNaN(value))execCommand('undo')"
          ></el-input> <!--type=0 运算-->
          <el-switch v-else-if="item.qcEntryType === '1'" v-model="item.qcEntryReal" :active-value="true"
                     :inactive-value="false"
          ></el-switch> <!--type=1 判断-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmEntry">确 定</el-button>
        <el-button @click="cancelEntry">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addLinkSample,
  editQcSample,
  getLinkEntries,
  getLinkSample,
  removeLinkSample
} from '@/api/research/qualityControl'
import SamplePick from '@/views/biobank/sample/SamplePick'

export default {
  name: 'QualitySample',
  components: {
    SamplePick
  },
  data() {
    return {
      qcId: undefined,
      // 遮罩层
      loading: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: false,
      // 样本复份 表格数据
      sampleList: [],
      // 选中的样本复份
      selectSamples: [],
      // 样本状态
      sampStateOptions: [],
      // 填写质控项对话框
      entryOpen: false,
      // 关联质控项
      qualityEntries: [],
      // 选中的质控关联样本
      selectQcSample: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.qcId = this.$route.query && this.$route.query.qcId
    this.getDicts('sample_state').then(response => {
      this.sampStateOptions = response.data
    })
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getLinkSample(this.qcId).then(response => {
        this.sampleList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 编辑质控项对话框确定按钮
    confirmEntry() {
      this.qualityEntries.forEach(q => {
        if (q.qcEntryType === '1' && !q.qcEntryReal) {
          q.qcEntryReal = false
        }
      })
      this.selectQcSample.qcEntryReals = JSON.stringify(this.qualityEntries)
      editQcSample(this.selectQcSample).then(response => {
        this.$message.success('编辑质控项成功')
        this.entryOpen = false
      })
    },
    // 编辑质控项对话框取消按钮
    cancelEntry() {
      this.entryOpen = false
    },
    // 编辑质控项
    handleEditEntry(row) {
      this.selectQcSample = {}
      this.qualityEntries = []
      // TODO 先出库/领出才可编辑质控项
      // if (row.sampState !== '4' && row.sampState !== '5') {
      //   this.$message.warning('请先领出或出库样本');
      //   return false;
      // }
      this.entryOpen = true
      this.selectQcSample = row
      getLinkEntries(this.qcId).then(response => {
        this.qualityEntries = response.data
        if (this.selectQcSample.qcEntryReals && this.selectQcSample.qcEntryReals.length > 0) {
          let qerArr = JSON.parse(this.selectQcSample.qcEntryReals)
          this.qualityEntries.forEach(i => {
            qerArr.forEach(j => {
              if (i.qcEntryId === j.qcEntryId) {
                this.$set(i, 'qcEntryReal', j.qcEntryReal)
              }
            })
          })
        }
      })
    },
    // 选择样本对话框取消事件
    samplePickClose() {
      this.open = !this.open
    },
    // 样本挑选
    samplePickEvent(selection) {
      selection.forEach((item, index) => {
        if (this.sampleList.indexOf(item) === -1) {
          this.sampleList.push(item)
        }
      })
      let qcSampleArr = []
      this.sampleList.forEach(item => {
        let qcSample = {}
        qcSample.qcId = this.qcId
        qcSample.sampBackupId = item.sampBackupId
        qcSampleArr.push(qcSample)
      })
      addLinkSample(qcSampleArr).then(response => {
        this.$message.success('挑选样本成功')
        this.getList()
        this.open = !this.open
      })
    },
    // 多选框选中事件
    handleSelectionChange(selection) {
      this.selectSamples = selection
      this.multiple = !selection.length
    },
    // 挑选样本
    handlePick() {
      this.open = true
    },
    // 批量移除
    handleRemove(row) {
      let qcSampIds = []
      if (row.id) {
        qcSampIds = [row.id]
      } else {
        this.selectSamples.forEach(s => {
          qcSampIds.push(s.id)
        })
      }
      this.$confirm('是否确认移除选中的样本复份', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return removeLinkSample(qcSampIds)
      }).then(() => {
        this.getList()
        this.msgSuccess('移除成功')
      })
    },
    // 样本状态状态字典翻译
    sampStateFormat(row, column) {
      return this.selectDictLabel(this.sampStateOptions, row.sampState)
    }
  }
}
</script>

<style scoped>

</style>
